ANTOOZA-FRONTEND/app/(main)/stock/[code]/style.scss

// 종목 상세 (/stock/[code]) — 상단 요약 + 탭 (시세 = 일별 시세 고밀도 테이블)
#stock-detail {
	padding: var(--sp-6) var(--sp-7);

	@media (max-width: 767.98px) {
		padding: var(--sp-5) var(--sp-4);
	}

	// 상단 요약
	.stock-detail__summary {
		padding-bottom: var(--sp-5);
		border-bottom: 1px solid var(--border-default);
	}

	.stock-detail__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-3);

		h1 {
			font-size: var(--fs-2xl);
			font-weight: 700;
			color: var(--text-primary);
		}
	}

	.stock-detail__code {
		font-size: var(--fs-base);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	.stock-detail__sector {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	.stock-detail__price {
		display: flex;
		align-items: baseline;
		gap: var(--sp-4);
		margin-top: var(--sp-4);
	}

	.stock-detail__close {
		font-size: 28px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.stock-detail__diff {
		font-size: var(--fs-lg);
	}

	.stock-detail__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3) var(--sp-6);
		margin-top: var(--sp-4);

		div {
			display: flex;
			align-items: baseline;
			gap: var(--sp-3);
		}

		dt {
			font-size: var(--fs-xs);
			color: var(--text-muted);
		}

		dd {
			font-size: var(--fs-sm);
			color: var(--text-primary);
			font-variant-numeric: tabular-nums;
		}

		// mobile 1열 스택
		@media (max-width: 767.98px) {
			flex-direction: column;
			gap: var(--sp-2);
		}
	}

	// T+1 명시 라벨
	.stock-detail__basis {
		margin-top: var(--sp-3);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// 탭
	.stock-detail__tabs {
		display: flex;
		gap: var(--sp-1);
		margin-top: var(--sp-5);
		border-bottom: 1px solid var(--border-default);

		a {
			display: inline-block;
			padding: var(--sp-3) var(--sp-5);
			font-size: var(--fs-base);
			color: var(--text-secondary);
			border-bottom: 2px solid transparent;

			&:hover {
				color: var(--text-primary);
			}

			&[aria-current='page'] {
				color: var(--text-primary);
				font-weight: 600;
				border-bottom-color: var(--az-accent);
			}
		}
	}

	.stock-detail__panel {
		margin-top: var(--sp-5);
	}

	// 일별 시세 테이블 — 얇은 선, 밀도 변수 소비
	.stock-detail__table {
		width: 100%;
		border-collapse: collapse;

		caption {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		thead th {
			position: sticky;
			top: 0;
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			font-weight: 600;
			color: var(--text-muted);
			text-align: right;
			background: var(--bg-elevated);
			border-bottom: 1px solid var(--border-strong);

			&:first-child {
				text-align: left;
			}
		}

		tbody td {
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			color: var(--text-primary);
			text-align: right;
			border-bottom: 1px solid var(--border-light);
			font-variant-numeric: tabular-nums;
			white-space: nowrap;

			&:first-child {
				text-align: left;
			}
		}

		tbody tr:hover {
			background: var(--bg-subtle-hover);
		}

		// mobile: 날짜/종가/등락률/거래량만 유지
		@media (max-width: 767.98px) {
			.stock-detail__col--sub {
				display: none;
			}
		}
	}

	// 준비 중 placeholder / 에러 / 빈 데이터
	.stock-detail__placeholder,
	.stock-detail__empty,
	.stock-detail__error {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
	}

	.stock-detail__error strong {
		display: block;
		margin-bottom: var(--sp-3);
		color: var(--text-secondary);
	}
}